<!DOCTYPE html>
<html>
    <head>
        <title>Testing Editor</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
		#toolbar {height : 100px;}
		</style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../includes/aloha/aloha.custom.js"></script>
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.TOC/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Link/delicious.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Link/LinkList.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Paste/plugin.js"></script> 
		<script type="text/javascript" src="../includes/aloha/plugins/com.gentics.aloha.plugins.Paste/wordpastehandler.js"></script> 
		<script type="text/javascript" src="../includes/joc-cms/js/aloha.config.js"></script>
        <script type="text/javascript">
        $(function(){
			// .. inside a $(document).ready block..
				toolbar = GENTICS.Aloha.FloatingMenu;
				if(toolbar.pinned) toolbar.togglePin();
				destination = new Object();
				destination.x = $("#toolbar").position().left;
				destination.y = $("#toolbar").position().top;
				toolbar.floatTo(destination);
				toolbar.togglePin();
			
			toolbar.togglePin();
              $('#test').aloha();
              $('button').button().click(function(){
                      $('#result').html($('#test').html());
              });
        })
        </script>
    </head>
    <body>
	<div id="wrapper">
	  <h1>Editor</h1>
	  <div id="toolbar"></div>
	  <div id="test">
		  <h1>Lorem ipsum dolor sit amet</h1>
		  <div class="article">consectetur adipiscing elit. Proin a mi massa. Vivamus ac velit justo, non consectetur nisl. Etiam porta fringilla sollicitudin. Maecenas varius, ante ac auctor hendrerit, lorem turpis euismod nisi, in egestas odio velit a lorem. Proin ut urna sed massa tristique vulputate. Ut at felis rhoncus ipsum elementum porta id vel felis. Quisque eget lorem libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tincidunt faucibus sem vitae ullamcorper. Cras placerat ipsum non velit elementum dignissim. Quisque ut ipsum dui, id sagittis lacus. Morbi urna sapien, hendrerit pretium molestie vel, iaculis non elit. Vivamus velit eros, luctus et bibendum ut, egestas et ante.</div>
	  </div>
	  <button>SAVE</button>
	  <h1>Result</h1>
	  <div id="result"></div>
	</div>
    </body>
</html>
